<template>
  <el-dialog v-if="open" class="dia-style" :title="title" :visible.sync="open" width="50%">
    <hk-form
      ref="formRef"
      :data="form"
      :rules="rules"
      :label-width="labelWidth"
      :btn-hidden="btnHidden"
      :form-labels="formLabels" />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import HkForm from '@/components/Hk-form/index.vue'
// import { addProductType, editProductType } from '@/api/milkyway/accessProduct'

export default {
  components: { HkForm },
  props: {
    title: {
      type: String,
      default() {
        return '标题'
      },
    },
    formData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 标题宽度
      labelWidth: '100',
      // 是否显示按钮
      btnHidden: true,
      // 表单项配置
      formLabels: [
        {
          label: '父级Id',
          field: 'parentId',
          type: 'input',
          disabled: true,
          hidden: true,
          span: 24,
        },
        {
          label: '产品名称',
          field: 'name',
          type: 'input',
          span: 24,
          attrs: {
            min: 0,
          },
        },
        {
          label: '产品编码',
          field: 'code',
          type: 'input',
          span: 24,
        },
      ],
      form: {},
      // 表单校验
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入产品编码', trigger: 'blur' }],
      },
    }
  },
  watch: {
    formData: {
      handler(newVal) {
        this.form = newVal
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  methods: {
    show() {
      this.open = true
      this.reset()
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs.formRef.handleFormSubmit('formLabels').then((res) => {
        if (this.form?.id !== undefined) {
          editProductType(this.form).then((response) => {
            this.$modal.msgSuccess('修改成功')
            this.open = false
            this.$emit('handleSubmit')
          })
        } else {
          addProductType(res).then((response) => {
            this.$modal.msgSuccess('新增成功')
            this.open = false
            this.$emit('handleSubmit')
          })
        }
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        name: undefined,
        code: undefined,
        parentId: undefined,
        id: undefined,
      }
      this.$refs.formRef?.$refs.formLabels.resetForm('formLabels')
    },
  },
}
</script>

<style scoped>
.el-dialog__body {
  height: auto !important;
}
</style>
